<template>
	<view class="edit">
		<!-- 头部 -->
		<!-- #ifndef MP-WEIXIN -->
		<public-header :title="title"></public-header>
		<view class="hei_100"></view>
		<!-- #endif -->
		<!-- end -->

		<!-- 功能 -->
		<view class="nav padd_32">
			<view class="nav-list clearfix">
				<text class="fl">头像</text>
				<view class="fr">
					<image v-if="uers.portrait" @click="changeImage()" :src="uers.portrait" mode="widthFix" class="portrait fr"></image>
					<image v-else @click="changeImage()" :src="uers.sex == '男' ? '/static/images/middle_image_man@2x.png' : '/static/images/middle_image_woman@2x.png'"
					 mode="aspectFill" class="portrait fl"></image>
				</view>
			</view>
			<view class="nav-list clearfix" @click="open">
				<text class="fl">昵称</text>
				<view class="fr">
					<text class="fl">{{ uers.nickname == null ? '未设置' : uers.nickname }}</text>
					<image src="/static/images/r-arrow.png" mode="widthFix" class="fr icon"></image>
				</view>
			</view>
			<uni-popup ref="popup" type="center">
				<view class="cont">
					<view class="title">编辑昵称</view>
					<input type="text" value="" placeholder="请输入昵称" v-model="name" />
					<view class="btn clearfix">
						<view class="fl" @click="close">取消</view>
						<view class="fr" @click="changeName">确认</view>
					</view>
				</view>
			</uni-popup>
			<view class="nav-list clearfix">
				<navigator url="/pageageA/pages/register/bindPhone">
					<text class="fl">手机号码</text>
					<view class="fr">
						<text class="fl">{{uers.phone}}</text>
					</view>
				</navigator>
			</view>
			<view class="nav-list clearfix" @click="open_sex">
				<text class="fl">性别</text>
				<view class="fr">
					<text class="fl">{{uers.sex}}</text>
					<image src="/static/images/r-arrow.png" mode="widthFix" class="fr icon"></image>
				</view>
			</view>
			<uni-popup ref="popup_sex" type="bottom">
				<view class="cont_sex">
					<view v-for="item in sex" :data-id='item' :key='item' @click="changeSex">{{item}}</view>
					<view class="btn" @click="close_sex">取消</view>
				</view>
			</uni-popup>
		</view>
		<!-- end -->

	</view>
</template>

<script>
	import PublicHeader from '@/components/PublicHeader.vue';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import store from "@/store/index.js"
	export default {
		components: {
			PublicHeader,
			uniPopup
		},
		computed: mapState(['hasLogin', 'uerInfo']),
		data() {
			return {
				title: '个人中心',
				uers: '',
				name: '',
				image: '',
				sex: ['男', '女'],
			};
		},
		onLoad() {
			var _this = this;
			if (this.hasLogin) {
				_this.$http
					.get('/personal/center/getuser/' + this.uerInfo.userId)
					.then(function(response) {
						_this.uers = response.data;
						console.log('个人信息', _this.uers);
					})
					.catch(function(error) {
						console.log(error);
					});
			};
		},
		methods: {
			open() {
				this.$refs.popup.open();
			},
			close() {
				this.$refs.popup.close();
			},
			open_sex() {
				this.$refs.popup_sex.open();
			},
			close_sex() {
				this.$refs.popup_sex.close();
			},
			changeName() {
				var _this = this;
				_this.$http
					.post('/personal/center/update', {
						id: _this.uers.id,
						nickname: _this.name
					})
					.then(function(response) {
						console.log(response);
						_this.$refs.popup.close();
						uni.showToast({
							title: '修改成功',
							icon: "none"
						})
						setTimeout(function() {
							uni.navigateBack({
								delta: 1,
							})
						}, 1000)
						_this.$http
							.get('/personal/center/getuser/' + this.uerInfo.userId)
							.then(function(response) {
								_this.uers = response.data;
								console.log('个人信息', _this.uers);
							})
							.catch(function(error) {
								console.log(error);
							});

					})
					.catch(function(error) {
						console.log(error);
					});
			},
			changeSex(e) {
				var _this = this;
				console.log(e.target.dataset.id)
				_this.$http
					.post('/personal/center/update', {
						id: _this.uers.id,
						sex: e.target.dataset.id
					})
					.then(function(response) {
						console.log(response);
						_this.$refs.popup_sex.close();
						uni.showToast({
							title: '修改成功',
							icon: "none"
						})
						setTimeout(function() {
							uni.navigateBack({
								delta: 1,
							})
						}, 1000)
						_this.$http
							.get('/personal/center/getuser/' + this.uerInfo.userId)
							.then(function(response) {
								_this.uers = response.data;
								console.log('个人信息', _this.uers);
							})
							.catch(function(error) {
								console.log(error);
							});
					})
					.catch(function(error) {
						console.log(error);
					});
			},
			changeImage(e) {
				var _this = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: function(val) {
						console.log(val);
						let type = val.tempFiles[0].type
						uni.showLoading({
						    	title:"上传中..."
							})
						if (type != '小程序无法获取选择的图片的类型') {
							uni.uploadFile({
								// 需要上传的地址
								url: store.state.baseUrl + '/user/appraise/uploadimg?uploadFile=' + val.tempFilePaths[0],
								// filePath  需要上传的文件
								filePath: val.tempFilePaths[0],
								name: 'uploadFile',
								success(res1) {
									// 显示上传信息
									console.log(res1)
									let form = JSON.parse(res1.data)
									console.log(form,"图片")
									_this.uers.portrait = form.msg
									if (form.success) {
										_this.$http
											.post('/personal/center/update', {
												id: _this.uers.id,
												portrait: form.msg
											})
											.then(function(response) {
												uni.showToast({
													title: '上传成功',
													icon: "none"
												})
												// _this.$Router.replace('/pages/personal/edit/index')
												_this.$http
													.get('/personal/center/getuser/' + this.uerInfo.userId)
													.then(function(response) {
														_this.uers = response.data;
														console.log('个人信息', _this.uers);
													})
													.catch(function(error) {
														console.log(error);
													});
											})
											.catch(function(error) {
												console.log(error);
											});
									}
								}
							});
						} else {
							uni.showToast({
								title: '不支持该类型文件',
								icon: "none"
							})
						}
					}
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.nav {
		margin-top: 16rpx;
	}

	.nav-list {
		width: 100%;
		height: 104rpx;
		line-height: 104rpx;
		font-size: 34rpx;
		color: #666;
		border-bottom: 1rpx solid #dfdfdf;
	}

	.nav-list:last-child {
		border: 0 none;
	}

	.nav-list .fr .fl {
		color: #888;
		font-size: 28rpx;
	}

	.icon {
		width: 13rpx;
		margin-left: 20rpx;
		margin-top: 42rpx;
	}

	.portrait {
		width: 66rpx;
		height: 66rpx !important;
		border-radius: 50%;
		background-color: #999;
		margin-top: 20rpx;
	}

	.cont {
		width: 540rpx;
		padding-top: 40rpx;
		font-size: 30rpx;
		color: #a4a9b0;
		background-color: #fff;
		border-radius: 16rpx;
	}

	.cont .title {
		color: #333;
		font-size: 34rpx;
		text-align: center;
		line-height: 48rpx;
		margin-bottom: 40rpx;
	}

	.cont input {
		width: 390rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin: 0 auto;
		padding-left: 30rpx;
		background-color: #f6f6f9;
	}

	.cont .clearfix {
		margin-top: 40rpx;
		height: 90rpx;
		line-height: 90rpx;
	}

	.cont .clearfix view {
		width: 49%;
		font-size: 32rpx;
		color: $uni-color1;
		text-align: center;
		font-weight: 500;
	}

	.cont .clearfix .fl {
		border-right: 1rpx solid #e7e7e7;
		font-weight: 400;
	}

	.cont_sex {
		background-color: #fff;
		text-align: center;
	}

	.cont_sex view {
		height: 112rpx;
		line-height: 112rpx;
		font-size: 34rpx;
		border-bottom: 1rpx solid #E7E7E7;
	}

	.cont_sex view:last-child {
		border-top: 10rpx solid #F6F6F9;
	}
</style>
